<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page import="cn.chinaunicom.sdsi.frm.sys.R.ProResource"%>
<c:set var="appPath" scope="page" value="<%=ProResource.getAppPath() %>"/>
<c:set var="appName" scope="page" value="${pageContext.request.contextPath}"/>
<c:set var="frmPrefix" scope="page" value="${appName}${appPath}"/>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html lang="zh_CN">
  <head>
  	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  	<link rel="stylesheet" href="<%=basePath %>/resource/css/style.css"/>
	<script type="text/javascript" src="<%=basePath %>/resource/js/jquery/jquery-1.12.4.min.js"></script>
	<title>解决方案</title>
	<script type="text/javascript">
		$(function(){
			//显示隐藏搜索框
			$("#aa").click(function(){
				$("#ii").toggle();
			});
			
			//发表评论
			$("#comm_save").click(function(){
				var content = $("#content").val();
				var infoId = $("#infoId").val();
				var parentId = $("#parentId").val();
				$.ajax({
					url:"${frmPrefix}/info/saveComm.action",
					type:"post",
					dataType:"json",
					data:{content:content,infoId:infoId,parentId:parentId},
					success:function(data){
						$("#content").val("");
						var str = "";
						$.each(data,function(i,n){
							str += "<div class='commMain'>"+
									"<div class='comm-item'>"+
									"<div class='comm-content'>"+
									"<a>"+ (typeof(n.comm.staff_name)=='undefined'?'韩梅梅':n.comm.staff_name) +":</a>"+ n.comm.content +""+
									"<div class='dateMemo'><span>"+ getFormateDate(n.comm.date) +"</span><a onclick='setParentId("+ n.comm.id +",\""+n.comm.staff_name+"\");'>回复</a></div>"+
									"</div>";
									$.each(n.sec_comm,function(i,node){
										str += "<div class='comm-item'>"+
												"<div class='comm-content'>"+
												"<a>" +node.commentor+ "</a>回复<a>" + node.replyer + ":</a>"+ node.content + ""+
												"<div class='dateMemo'><span>" + getFormateDate(node.date) + "</span><a onclick='setParentId("+ node.id +",\""+node.commentor+"\");'>回复</a></div>"+
												"</div>"+
												"</div>";
												
									});
							str += "</div>"+
									"</div>";
						});
						$("#comms").html(str);
						//清空隐藏域parentId
						$("#parentId").val("");
						console.log(str);
					}
				});
			});		
		});
		
		//根据时间戳字符串格式化日期
		function getFormateDate(str){
			var date = new Date(str);
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			var hours = date.getHours();
			var minutes = date.getMinutes();
			return year + "-" + getzf(month) + "-" + getzf(day)+" " + getzf(hours) + ":" + getzf(minutes);
		}
		//补零操作
		function getzf(num){
			if(parseInt(num) < 10){
				num = "0"+num;
			}
			return num;
		}
		
		//点击回复设置parentId
		function setParentId(pId,commentor){
			$("#parentId").val(pId);
			$("#content").focus();
		}
	</script>
	<style type="text/css">
		.arc-body p{
			text-align: justify;
		}
		#comms{
			border-top: 1px solid #ccc;
		}
		.commMain{
			box-sizing:border-box;
			padding: 10px 20px 0;
			width: 100%;
		}
		.comm-item{
			padding: 0 0 0 40px;
			position: relative;
			background-image: url("/upf/resource/img/100.png");
			background-repeat: no-repeat;
			background-size:30px auto;
			
		}
		.comm-content{
			position: relative;
			line-height: 1.5;
			top: -4px;
			font-size: 16px;
			color: #333;
			word-break:break-all;
		}
		.comm-content a{
			color: #5d7895;
		}
		.dateMemo span{
			margin-right: 10px;
		}
	</style>
  </head>
  <body>
  	<header class="header">
	  <h1 class="page-tit">解决方案</h1>
	    <a href="${frmPrefix }/info/infoIndex.action" class="h-link-l waves-effect waves-icon waves-light"><i class="nav-icon-l"></i>返回</a>
		<a href="#" class="h-link-r waves-effect waves-icon waves-light" id="aa"><i class="nav-icon-r"></i>查询</a>
		<div id="ii" class="search-expand">
			<form method="get" class="searchform themeform" action="${frmPrefix }/info/fullTextIndex.action">
            	<input type="text" class="search input" id="search_key" placeholder="请输入关键词" x-webkit-speech="" name="search_key">
            	<button type="submit" class="tip-bottom" title="搜索" id="fullText"><i class="icon-search"></i></button>
            </form>
		</div>
		<input type="hidden" value="${info.id }" id="infoId">
	</header>
	<section class="section">
		<h2 class="arc-tit">${info.title }</h2>
	  <div class="sub-tit"><i class="arc-icon-keyword">${empty info.contCode ? '智慧城市' : info.contCode}</i><i class="arc-icon-name">${empty info.publishUserName ? '李雷' : info.publishUserName }</i><i class="arc-icon-time"><fmt:formatDate value="${info.publishDate }" pattern="yyyy-MM-dd"/></i><div class="clearfix"></div></div>
	    <div class="arc-body">
	    	<center><img src="/upf/resource/img/pic1.jpg"></center>
	        <p>${info.content }</p>
	    </div>
	    <c:forEach items="${info.attas }" var="atta">
	    	<div class="attach" style="padding-bottom: 0px;"><a href="${frmPrefix }/info/downloadAtta.action?address=${atta.address }&id=${atta.id}&name=${atta.name}" class="attach-icon">${atta.name }</a></div>
	    </c:forEach>
	</section>
	
	<div id="comms">
	<c:forEach items="${comms }" var="comm">
		<div class="commMain">
			<div class="comm-item">
				<div class="comm-content">
					<a>${comm.comm.staff_name }&nbsp;:&nbsp;</a>${comm.comm.content }
					<div class="dateMemo"><span><fmt:formatDate value="${comm.comm.date }" pattern="yyyy-MM-dd HH:mm"/></span><a onclick="setParentId(${comm.comm.id},'${comm.comm.staff_name }');">回复</a></div>
				</div>
				<c:forEach items="${comm.sec_comm }" var="sec_comm">
					<div class="comm-item">
						<div class="comm-content">
							<a>${sec_comm.commentor }&nbsp;</a>回复<a>&nbsp;${sec_comm.replyer }&nbsp;:&nbsp;</a>${sec_comm.content }
							<div class="dateMemo"><span><fmt:formatDate value="${sec_comm.date }" pattern="yyyy-MM-dd HH:mm"/></span><a onclick="setParentId(${sec_comm.id},'${sec_comm.commentor }');">回复</a></div>
						</div>
					</div>
				</c:forEach>
			</div>
		</div>
  </c:forEach>
  </div>
  
	<footer class="detail-footer">
	    <input type="text" class="searchInput" placeholder="" name="content" id="content"/>
	    <input type="hidden" id="parentId">
	    <button class="iconBox searchBt" id="comm_save">发表</button>
	    <div class="clearfix"></div>
	</footer>
  </body>
</html>